<template>
  <div>
    <!-- 单元素vue动画
              条件：进入、离开
              实际：v-if,v-show,动态组件(路由出口)，组件根节点
              实现
                 进入动画：二个css
                     进入动画起点的class:.xxx-enter
                     进入过程中一直存在的class:.xxx-enter-active
                 离开动画：二个css
                     离开时结束点的class:.xxx-leave-to
                     离开过程中一直存在的class:.xxx-leave-active

                步骤：
                1：用transition包住
                2：加入name:后面css的前缀
                3：css
                      .xxx-enter:进入过程中希望从什么状态变到正常状态
                      .xxx-enter-active:进入过程中一直存在的class,常用于承载transition/animation
                      .xxx-leave-to:离开过程中希望从正常状态变到什么状态
                      .xxx-leave-active:离开过程中一直存在的class,常用于承载transition/animation
     多元素动画
         步骤：
            1：用transition-group包住,每一个动画元素都要加key(不加就报错)
            2：加入name:后面css的前缀
            3：css
                      .xxx-enter:进入过程中希望从什么状态变到正常状态
                      .xxx-enter-active:进入过程中一直存在的class,常用于承载transition/animation
                      .xxx-leave-to:离开过程中希望从正常状态变到什么状态
                      .xxx-leave-active:离开过程中一直存在的class,常用于承载transition/animation

    -->
    <button @click="bol=!bol">切换box</button>
    <transition name="xxx">
      <div v-if="bol" class="box" />
    </transition>

    <hr>

    <button @click="bol2=!bol2">多元素控制</button>
    <hr>
    <transition-group name="aaa">
      <div v-for="item in 5" v-show="bol2" :key="item" class="box2" />

    </transition-group>
  </div>

</template>
<script>
export default {
  data() {
    return {
      bol: true,
      bol2: true
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
    width: 300px;
    height: 300px;
    background-color: #f00;
}
.xxx-enter-active{
    transition: all 0.5s;
}
.xxx-enter{
    width: 0;
    height: 0;
    opacity: 0;
    background-color: #00f;
}
.xxx-leave-active{
    transition: all 10.5s;
}
.xxx-leave-to{
    transform: translateX(900px);
        width: 0;
    height: 0;
    opacity: 0;
}

.box2{
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: pink;
    margin-right:15px;
}
.aaa-enter-active,.aaa-leave-active{
    transition: all 0.5s;
}
.aaa-enter-active:nth-child(1),.aaa-leave-active:nth-child(5){
    transition-delay: 0s;
}
.aaa-enter-active:nth-child(2),.aaa-leave-active:nth-child(4){
    transition-delay: 0.2s;
}
.aaa-enter-active:nth-child(3),.aaa-leave-active:nth-child(3){
    transition-delay: 0.4s;
}
.aaa-enter-active:nth-child(4),.aaa-leave-active:nth-child(2){
    transition-delay: 0.6s;
}
.aaa-enter-active:nth-child(5),.aaa-leave-active:nth-child(1){
    transition-delay: 0.8s;
}
.aaa-enter{
    transform: translateY(200px);
    opacity: 0;
}

.aaa-leave-to{
      transform: translateY(-200px);
    opacity: 0;
}

</style>
